<script setup>
// watch 监视
import { ref, watch } from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () => {
  count.value++
}
const changeNickname = () => {
  nickname.value = '李四'
}
// 1. 监视单个数据的变化
//    watch(ref对象,(newValue,oldValue)=>{...})
/*watch(count,(newValue,oldValue) => {
  console.log(newValue, oldValue)
})*/
// 2. 监视多个数据的变化
//    watch([ref对象1,ref对象2],(newValue,oldValue)=>{...})
/*watch([count,nickname],(newValue,oldValue) => {
  console.log(newValue, oldValue)
})*/
// 3. immediate 立刻执行
/*watch(count,(newValue,oldValue) => {
  console.log(newValue,oldValue)
},{
  immediate: true
})*/
// 4. deep 深度监视，默认 watch 进行的是浅层监视
//    const ref1=ref(简单类型)可以直接监视
//    const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  userInfo.value.age++
  //userInfo.value.name = '1s'
  // 修改了 userInfo.value修改了对象的地址，才能监视到
  //userInfo.value = { name: '1s', age: 50 }
}
// 深度监视
/*watch(userInfo,(newValue) => {
  console.log(newValue)
},{
  deep: true
})*/
// 5. 对于对象中的属性，进行监视
watch(() => userInfo.value.age, (newValue,oldValue) => {
  console.log(newValue,oldValue)
})
</script>

<template>
  
  <div>
    <div>{{ count }}</div>
    <button @click="changeCount" type="button">修改数字</button>
    <div>{{ nickname }}</div>
    <button @click="changeNickname" type="button">修改昵称</button>
    <div>-------------------------</div>
    <div>{{ userInfo }}</div>
    <button @click="setUserInfo" type="button">修改userInfo</button>
  </div>
  
</template>


<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
